import React from 'react';
import PropTypes from 'prop-types'
import CountUp from 'react-countup';
import { Icon, Card } from 'antd'
import styles from './numberCard.less';
import numArray from '../test'

function NumberCard({title, color, icon, number, countUp}) {

  return (
    <Card className={styles.numberCard}
      bordered={true}
      bodyStyle={{ padding: 0 }}
      >
    <Icon className={styles.iconWarp} style={{ color }} type={icon} />
    <div className={styles.content}>
      <p className={styles.title}>{title || 'No Title'}</p>
      <p className={styles.number}>
      <CountUp
        start={0}
        end={number}
        duration={3}
        useEasing
        useGrouping
        separator=","
        />
      </p>
    </div>
    </Card >
  );
}

NumberCard.propTypes = {
  icon: PropTypes.string,
  color: PropTypes.string,
  title: PropTypes.string,
  number: PropTypes.number,
  countUp: PropTypes.object,
};

export default NumberCard
